<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <!--bootstrap3-->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <!--    <link rel="stylesheet" href="/css/message.css">-->


</head>
<body>
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">班级信息</h3>
    </div>
    <div class="panel-body">
        <div style="display:inline-block;">

            <!--        <div style="float:left;padding:6px;">-->
            <!--          <span>姓名：</span>-->
            <!--        </div>-->

            <!--        <div style="float:left;padding:6px;">-->
            <!--          <span>性别：</span>-->
            <!--        </div>-->
            <div style="float:left;">
                <select id="chooseQuery" class="form-control" style="width:87px;">
                    <option value="0">请选择</option>
                    <option value="1">班级号</option>
                    <option value="2">年级号</option>
                    <option value="3">专业编号</option>
                </select>
            </div>
            <div style="float:left;">
                <input id="searchPassage" class="form-control" style="width:200px;" placeholder="请输入查询内容" />
            </div>

            <div style="float:left;margin-left:20px;">
                <button id="query" class="btn btn-primary" onclick="search();">
                        <span class="glyphicon glyphicon-search">
		                </span> 查询
                </button>
                <button id="refresh" class="btn btn-default" onclick="resetList();">
                        <span class="glyphicon glyphicon-refresh">
		                </span> 刷新
                </button>
                <!-- Button trigger modal -->
                <!--          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="preAdd();">-->
                <!--                        <span class="glyphicon glyphicon-plus">-->
                <!--                        </span>新增-->
                <!--          </button>-->
                <!--          <button type="button" class="btn btn-danger"   onclick="batchDelete();">-->
                <!--                        <span class="glyphicon glyphicon-trash">-->
                <!--                        </span>批量删除-->
                <!--          </button>-->
                <!--          <button type="button" id="upload" class="btn btn-primary">-->
                <!--                        <span class="glyphicon glyphicon-plus">-->
                <!--                        </span>批量导入-->
                <!--          </button>-->

            </div>
        </div>
    </div>
</div>

<div class="box1">
    <table class="table table-bordered table-striped" id="stuTable"></table>
</div>


<!--批量导入模态框-->
<!--批量导入操作-->
<!-- 模态框（Modal） -->

<!--<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">-->
<!--  <div class="modal-dialog">-->
<!--    <div class="modal-content">-->
<!--      <div class="modal-header">-->
<!--        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>-->
<!--        <h4 class="modal-title" id="ModalLabel">文件上传</h4>-->
<!--      </div>-->
<!--      <div class="modal-body">-->
<!--        <input id="f_upload" type="file"  name="file"/>-->
<!--      </div>-->

<!--    </div>-->
<!--  </div>-->
<!--</div>-->

<!--学生详情-->
<div class="modal fade" tabindex="-1" role="dialog" id="detailModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">班级详情</h4>
            </div>
            <div class="modal-body">

                <table class="table11_6">
                    <tr>
                        <td> <span>班级号：</span></td>
                        <td> <input type="text" class="form-control form1" id="classid" aria-describedby="emailHelp" placeholder="Enter classid" name="classid"  readonly="readonly"></td>
                    </tr>
                    <tr>
                        <td> <span>年级号：</span></td>
                        <td> <input type="text" class="form-control form1" id="gradeid" aria-describedby="emailHelp" placeholder="Enter gradeid" name="gradeid"  readonly="readonly"></td>
                    </tr>
                    <tr>
                        <td><span>专业编号：</span></td>
                        <td> <input type="text" class="form-control form1" id="mid" aria-describedby="emailHelp" placeholder="Enter mid" name="mid"  readonly="readonly"></td>
                    </tr>

                </table>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <!--        <button type="button" class="btn btn-primary">Save changes</button>-->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- 学生Modal -->
<!--<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">-->
<!--  <div class="modal-dialog" role="document">-->
<!--    <div class="modal-content">-->
<!--      <div class="modal-header">-->
<!--        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
<!--        <h4 class="modal-title" id="myModalLabel">学生信息</h4>-->
<!--      </div>-->
<!--      <div class="modal-body">-->
<!--        <form id="formStudent">-->
<!--          <input hidden="hidden" id="id" name="id">-->
<!--          <div class="form-group">-->
<!--            <label for="sno">学号</label>-->
<!--            <input type="text" class="form-control" id="sno" aria-describedby="emailHelp" placeholder="Enter sno" name="sno">-->
<!--          </div>-->
<!--          <div class="form-group">-->
<!--            <label for="sname">姓名</label>-->
<!--            <input type="text" class="form-control" id="sname" aria-describedby="emailHelp" placeholder="Enter sname" name="sname">-->
<!--          </div>-->

<!--          <div class="form-group">-->
<!--            <label for="sex">性别</label>-->
<!--            <select class="form-control" id="sex" name="sex">-->
<!--              <option value="男">男</option>-->
<!--              <option value="女">女</option>-->
<!--            </select>-->
<!--          </div>-->

<!--          <div class="form-group">-->
<!--            <label for="sage">年龄</label>-->
<!--            <input type="text" class="form-control" id="sage" aria-describedby="emailHelp" placeholder="Enter sage" name="sage">-->
<!--          </div>-->

<!--          <div class="form-group">-->
<!--            <label for="password">密码</label>-->
<!--            <input type="text" class="form-control" id="password" aria-describedby="emailHelp" placeholder="Enter password" name="password">-->
<!--          </div>-->

<!--          <div class="form-group">-->
<!--            <label for="classid">班级号</label>-->
<!--            <input type="text" class="form-control" id="classid" aria-describedby="emailHelp" placeholder="Enter classid" name="classid">-->
<!--          </div>-->

<!--          <div class="form-group">-->
<!--            <label for="gradeid">年级号</label>-->
<!--            <input type="text" class="form-control" id="gradeid" aria-describedby="emailHelp" placeholder="Enter gradeid" name="gradeid">-->
<!--          </div>-->

<!--          <div class="form-group">-->
<!--            <label for="mid">专业编号</label>-->
<!--            <input type="text" class="form-control" id="mid" aria-describedby="emailHelp" placeholder="Enter mid" name="mid">-->
<!--          </div>-->

<!--        </form>-->
<!--      </div>-->
<!--      <div class="modal-footer">-->
<!--        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>-->
<!--        <button type="button" class="btn btn-primary" onclick="saveStudent();">-->
<!--          <span class="glyphicon glyphicon-floppy-save"></span>-->
<!--          保存-->
<!--        </button>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</div>-->




<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/js/upload.js"></script>
<script src="/js/fileinput.min.js"></script>
<!--  <script src="/js/message.js"></script>-->
<script src="/js/msg.js"></script>
<script>

    /**
     * 显示学生列表
     */
    function loadTable(){
        $("#stuTable").bootstrapTable({
            url: '/webapi/classinfo/getbypage',
            striped:true, //设置为ture有隔行变色效果
            pagination:true,//设置为true会在底部显示分页条
            singleSelect: false,//设置为true将禁止多选
            pageSize:8,   //设置分页的每页条数
            pageList:[8],
            pageNumber:1, //设置了分页，首页页码
            uniqueId : "id", //每一行的唯一标识，一般为主键列
            paginationPreText: "上一页",
            paginationNextText: "下一页",
            sortName: "id",
            sortOrder: "asc",
            onSort:function (name,order){
                // params.sortName = name;
                // params.sortOrder = order;
                console.log(name);
                console.log(order);
            },
            sidePagination: "server", //设置在哪里进行分页，可选值为"client"或者
            queryParams:function (params){
                let paraObj = {
                    size: params.limit,
                    page: params.offset/params.limit,
                    sort: params.sort,
                    direct: params.order,
                    passage:$("#searchPassage").val(),
                    chooseValue: $("#chooseQuery").val()
                };
                return paraObj;
            },

            onLoadError:function (rs){
                console.log(rs)
                if (rs.code === 403){
                    window.location.href = "../../templates/login/user.html"
                }
            },
            responseHandler:function (res){
                console.log(res.data)
                return {
                    "total": res.data.total, // 总页数
                    "rows": res.data.rows    // 数据

                }
                // return res.data
            },
            columns:[{
                field: "id",
                title: "序号",
                sortable: true,
                align: "center"
            },{
                field: "classid",
                title: "班级号",
                sortable: true,
                align: "center"
            },{
                field: "gradeid",
                title: "年级号",
                sortable: true,
                align: "center"
            },{
                field: "mid",
                title: "专业编号",
                sortable: true,
                align: "center"
            },{
                field: "id",
                title: '操作',
                align: 'center',
                formatter: function(value,row,index){
                    // let e = "<a href='#' style='text-decoration: none;color: #0c4128' onclick='editStudent("+row.id+");'>编辑</a> "
                    // let d = "<a href='#' style='text-decoration: none;color: #0c4128' onclick='deleteStudent("+row.id+")'>删除</a>"
                    let e = "<button id='look' class='btn btn-info btn-xs' style='width: 60px;height: 30px' onclick='queryStudent("+row.id+");'>" +
                        "详情</button> "
                    // let d = "<button  class='btn btn-danger btn-xs' style='width: 60px;height: 30px' onclick='deleteStudent("+row.id+")'>" +
                    //         "<span class='glyphicon glyphicon-trash'></span>删除</button>"
                    return e;
                },width:250 //自定义修改，增加修改、删除标志
            }],
            formatNoMatches: function (){
                return "没有相关的匹配结果";
            },
            formatLoadingMessage:function (){
                return "请稍等，正在加载中...";
            }
        })
    }

    function queryStudent(id){
        //查看按钮 显示模态框
        $("#detailModal").modal("show");
        // let rows = $("#stuTable").bootstrapTable("getSelections");
        // let toId = $("#id").val();
        // console.log(toId);
        // let rows = $("#stuTable").bootstrapTable('getRowByUniqueId',id);
        // console.log(rows);
        // $("#sno").val(rows.sno);
        // $("#sname").val(rows.sname);
        // $("#sex").val(rows.sex);
        // $("#sage").val(rows.sage);
        // $("#password").val("");
        // $("#classid").val(rows.classid);
        // $("#gradeid").val(rows.gradeid);
        // $("#mid").val(rows.mid);

        $.ajax({
            url:'/webapi/classinfo/get/'+id
        }).done(function (rs){
            console.log(rs)
            if (rs.code === 200){
                let data = rs.data
                $("#classid").val(data.classid);
                $("#gradeid").val(data.gradeid);
                $("#mid").val(data.mid);
            }
        })
    }
    /**
     * 批量删除
     */
    // function batchDelete(){
    //   let rows = $("#stuTable").bootstrapTable("getSelections");
    //   let len = rows.length;
    //   if(len == 0){
    //     message.showText("error","请选择要删除的行")
    //   }else{
    //     if(confirm("你确定删除"+len+"条内容吗？")){
    //       let arr = [];
    //       for (let i = 0;i < len;i++){
    //         arr.push(rows[i].id);
    //       }
    //       $.ajax({
    //         url: '/webapi/student/batchdelete/'+arr,
    //         method: 'delete'
    //       }).done(function (rs){
    //         if (rs.code == 200){
    //           $("#stuTable").bootstrapTable("destroy");
    //           loadTable();
    //           message.showText("success","删除成功")
    //         }
    //
    //       })
    //     };
    //
    //
    //   }
    //
    // }

    /**
     * 删除学生
     */
    // function deleteStudent(id){
    //   if(confirm("您是否真的要删除该记录?")){
    //     $.ajax({
    //       url: '/webapi/student/delete/'+id,
    //       method: 'delete'
    //     }).done(function (rs){
    //       if (rs.code == 200){
    //         $("#stuTable").bootstrapTable("destroy");
    //         loadTable();
    //         message.showText("success","删除成功")
    //       }
    //
    //     })
    //   }
    //
    // }

    /**
     * 点击新增时给id赋值，以便判断做新增操作
     */
    // function preAdd(){
    //   $("#id").val(0);
    //   $("#sno").val("");
    //   $("#sname").val("");
    //   $("#sex").val("");
    //   $("#sage").val("");
    //   $("#password").val("");
    //   $("#classid").val("");
    //   $("#gradeid").val("");
    //   $("#mid").val("");
    // }

    // 修改之前获取学生信息
    // function editStudent(id){
    //   $('#myModal').modal('show')
    //   $.ajax({
    //     url:'/webapi/student/get/'+id
    //   }).done(function (rs){
    //     console.log(rs)
    //     if (rs.code == 200){
    //       let data = rs.data
    //       $("#id").val(data.id);
    //       $("#sno").val(data.sno);
    //       $("#sname").val(data.sname);
    //       $("#sex").val(data.sex);
    //       $("#sage").val(data.sage);
    //       $("#password").val("");
    //       $("#classid").val(data.classid);
    //       $("#gradeid").val(data.gradeid);
    //       $("#mid").val(data.mid);
    //     }
    //   })
    // }

    /**
     * 根据id判断是新增还是更新，判断之后做新增和更新操作
     */
    // function saveStudent(){
    //   let data = $("#formStudent").serialize();
    //   let id = $("#id").val();
    //   if (id < 1){
    //     //是新增
    //     $.ajax ({
    //       url:"/webapi/student/insert",
    //       method:"post",
    //       data:data
    //     }).done(function (rs) {
    //       console.log(rs)
    //       if (rs.code == 200){
    //         $('#stuTable').bootstrapTable('destroy');
    //         loadTable();
    //         $('#myModal').modal('hide');
    //         message.showText("success","添加成功")
    //       }
    //
    //     });
    //   } else {
    //
    //     //是更新
    //     $.ajax ({
    //
    //       url:"/webapi/student/update",
    //       method:"put",
    //       data:data
    //
    //     }).done(function (rs) {
    //       if (rs.code == 200){
    //         $('#stuTable').bootstrapTable('destroy');
    //         loadTable();
    //         $('#myModal').modal('hide');
    //         message.showText("success","更新成功")
    //       }
    //     });
    //   }
    // }
    //
    /**
     * 刷新数据
     */
    function resetList(){
        $("#searchPassage").val("");
        $("#chooseQuery").val(0);
        $('#stuTable').bootstrapTable("destroy");
        loadTable();
        message.showText("success","刷新成功");
    }
    function search(){
        $("#stuTable").bootstrapTable("destroy");
        loadTable();
    }

    $(function (){
        loadTable()
    })

    // 引用后需要初始化，解决IE8以上浏览器不支持JS的h5新属性classList
    // $(function(){
    //     message.classList()
    // })

</script>

</body>
</html>